/*
 * @Description: 左侧菜单栏组件
 * @Project: 
 * @Author: michelle
 * @Date: 2022-02-22 18:50:20
 * @LastEditors: michelle
 * @LastEditTime: 2022-02-23 18:18:10
 * @Modified By: michelle
 * @FilePath: /vite-project/src/components/sidebar/index.jsx
 */
import React, { useEffect, useState, useMemo } from 'react'
import { Layout, Menu } from 'antd'
import config from '../../../config'
import { useLocation, Link } from 'react-router-dom'
import { MENU_LIST } from '../../../config'
import logoImage from '@/assets/img/logo.svg'
import './index.less'

const { Sider } = Layout
const { SubMenu } = Menu

export default function Sidebar({ collapsed }) {
    const location = useLocation()
    const [selectedKeys, setSelectedKeys] = useState('')
    const [openKeys, setOpenKeys] = useState([])

    function handleOpenChange(openKeys) {
        setOpenKeys(openKeys)
    }

    useEffect(() => {
        const pathname = location.pathname
        const fragment = pathname.split('/').slice(0, 3)
        const prefixPath = fragment.join('/')
        if (fragment.length === 3) {
            for (let i = 0; i < MENU_LIST.length; i++) {
                const menu = MENU_LIST[i]
                if (Array.isArray(menu.children)) {
                    const findIdx = menu.children.findIndex(menu => pathname === menu.path)
                    if (findIdx !== -1) {
                        setSelectedKeys(menu.children[findIdx].path)
                        setOpenKeys([menu.name])
                        break
                    }
                }
                if (menu.path.indexOf(prefixPath) !== -1) {
                    setSelectedKeys(menu.path)
                    break
                }
            }
        }
    }, [location.pathname])

    const menuItems = useMemo(() => {
        return MENU_LIST.map(menu => {
            if (Array.isArray(menu.children)) {
                return (
                    <SubMenu
                        key={menu.name}
                        title={
                            <>
                                {menu.icon}
                                <span>{menu.name}</span>
                            </>
                        }
                    >
                        {menu.children.map(subItem => (
                            <Menu.Item key={subItem.path}>
                                <Link to={subItem.path}>{subItem.name}</Link>
                            </Menu.Item>
                        ))}
                    </SubMenu>
                )
            }

            return (
                <Menu.Item key={menu.path}>
                    <Link to={menu.path}>
                        {menu.icon}
                        <span>{menu.name}</span>
                    </Link>
                </Menu.Item>
            )
        })
    }, [])
    return (
        <Sider
            trigger={null}
            collapsible
            collapsed={collapsed}
            width={190}
            className="sidebar"
        >
            {/* logo */}
            <div className="sider-menu-logo">
                {collapsed ? (
                    <img src={logoImage} />
                ) : config.title}
            </div>
            <Menu
                selectedKeys={[selectedKeys]}
                openKeys={openKeys}
                onOpenChange={handleOpenChange}
                mode="inline"
                theme="dark"
            >
                {menuItems}
            </Menu>
        </Sider>
    )
}
